<template>
  <div id="category">
    <!-- 顶部导航栏 -->
    <nav-bar class="nav-bar">
      <div slot="center">商品分类</div>
    </nav-bar>
    <div class="content">
      <!-- 左侧分类 -->
      <tab-menu :titles="categories"
                :current-index="currentIndex" 
                @menuClick="menuClick" />
      <!-- 右侧内容 -->
      <scroll id="tab-content" ref="scroll">
        <!-- 右侧-顶部分类 -->
        <tab-content-category :subcategories="showSubcategories"></tab-content-category>
        <tab-control :titles="['综合', '新品', '销量']" @tabClick="controlClick"></tab-control>
        <!-- 右侧-商品list -->
        <tab-content-detail :category-detail="showCategoryDetail"></tab-content-detail>
      </scroll>
    </div>
  </div>
</template>

<script>
  import NavBar from 'components/common/navbar/NavBar'
  import Scroll from "components/common/scroll/Scroll"
  import TabControl from "components/content/tabControl/TabControl"

  import TabMenu from './childComps/TabMenu'
  import TabContentCategory from './childComps/TabContentCategory'
  import TabContentDetail from './childComps/TabContentDetail'

  import { getCategory, getSubcategory, getCategoryDetail } from "network/category";
  import { itemListenerMixin } from 'common/mixin'

  export default {
    name: "Category",
    components: {
      NavBar,
      Scroll,
      TabMenu,
      TabContentCategory,
      TabControl,
      TabContentDetail
    },
    mixins: [itemListenerMixin],
    data () {
      return {
        categories: [],
        categoryData: {},
        currentIndex: -1,
        currentType: 'pop'
      }
    },
    computed: {
      showSubcategories() {
        if (this.currentIndex === -1) return {}
        return this.categoryData[this.currentIndex].subcategories
      },
      showCategoryDetail() {
        if (this.currentIndex === -1) return []
        return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
      },
    },
    methods: {
      /**
       * 网络请求方法
       * 
       * 一、数据结构
       *    categories: [
       *      {分类一},
       *      {分类……}            
       *    ],
       *    categoryData: {
       *      0: {
       *        subcategories(子分类): {},
       *        categoryDetail(左侧分类商品): {
       *          'pop': [],
       *          'new': [],
       *          'sell': []
       *        }
       *      },
       *      categorys.index(key同categorys的数组下标): {……}
       *    }
       * 
       * 二、分类数据获取步骤：
       *    1.获取左侧分类数据（this.categories）；
       *    2.根据选中的左侧分类（currentIndex），请求对应的数据（this.categoryData）:
       *      包括子分类（this.categoryData.subcategories）以及商品列表（this.categoryData.categoryDetail）
       * 
       */
      _getCategory() {
        /**
         * 获取默认数据
         */
        // 获取左侧分类数据
        getCategory().then(res => {
          this.categories = res.data.category.list

          // 初始化`categoryData`数据结构
          for (let i=0; i < this.categories.length; i++) {
            this.categoryData[i] = {
              subcategories: {},
              categoryDetail: {
                'pop': [],
                'new': [],
                'sell': []
              }
            }
          }
          // 默认获取第一个分类的子分类数据
          this._getSubcategory(0)
        })
      },
      _getSubcategory(index) {
        /**
         * 获取分类数据
         */
        // 获取数据时，更改左侧分类指针
        this.currentIndex = index
        const maitKey = this.categories[index].maitKey

        // 获取内容页数据
        getSubcategory(maitKey).then(res => {
          this.categoryData[index].subcategories = res.data
          this.categoryData = {...this.categoryData}

          // 获取指针所指的分类商品
          this._getCategoryDetail('pop')
          this._getCategoryDetail('new')
          this._getCategoryDetail('sell')
        })
      },
      _getCategoryDetail(type) {
        // 获取分类商品列表
        const miniWallkey = this.categories[this.currentIndex].miniWallkey
        getCategoryDetail(miniWallkey, type).then(res => {
          this.categoryData[this.currentIndex].categoryDetail[type] = res
        })
      },

      /**
       * 点击事件
       */
      menuClick(index) {
        /**
         * 左侧分类菜单点击事件
         */
        this.currentIndex = index

        this._getSubcategory(index)
      },
      controlClick(index) {
        /**
         * tab-control点击事件
         */
        switch (index) {
          case 0:
            this.currentType = 'pop'
            break
          case 1:
            this.currentType = 'new'
            break
          case 2:
            this.currentType = 'sell'
            break
        }
        // 获取商品数据
        this._getCategoryDetail(this.currentType)
      }
    },
    created () {
      this._getCategory()
    }
  }
</script>

<style scoped>
  #category {
    height: 100vh;
  }

  .nav-bar {
    background-color: var(--color-tint);
    font-weight: 700;
    color: #fff;
  }

  .content {
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;

    display: flex;
  }

  #tab-content {
    height: 100%;
    flex: 1;
    background-color: #fff;
  }

</style>
